<script setup>
import Item from '../components/Item.vue'
import useTodo from '../composable/useTodo';
import Sort from '../components/Sort.vue'
import Add from '../components/Add.vue';
const {todos,load} = useTodo();
load()
//当子组件完成删除时,父组件重新拉取一下数据(自定义事件)
// const del = async () => {
//   todos.value = await request.gets();
// }
  
</script>

<template>
  <div class="form">
    <Add class="add"/>
    <Sort />
  </div>
  <div>
    <item :todo='todo' class='item' v-for="todo of todos" :key="todo.id"/>
  </div>
</template>

<style scoped>
.form{
  padding: 10px;
  display: flex;
  flex-direction: row;
}
.add{
  flex: 1;
}
div{
    color:black;
    display:flex;
    flex-direction:column;
  }
.item{
  margin-bottom: 5px;
}
</style>